@extends('layouts/app')

@section('content')
{{-- rodeletethe房桌管理--}}
<div class="weui-pay  rodeletethe">

    <div class="site weui-cells_checkbox">
        <div class="weui-cell ">
            <div class="weui-cell__hd">
                <label for="name">名称:</label>
            </div>
            <div class="weui-cell__bd">
                <input class="weui-input" name="name" placeholder="唐朝">
            </div>
        </div>
    </div>

    <div class="site weui-cells_checkbox">
        <div class="weui-cell ">
            <div class="weui-cell__hd room">
                <label for="name">类型:</label>
            </div>
            <div class="weui-cell__bd">
                <input class="weui-input" id="selectType" name="" type="text" placeholder="包房">
                <input class="weui-input" id="type" name="type" type="hidden" >
            </div>
            <div class="weui-cell__dd">
                <label for="selectType">
                    <svg class="icon f40" aria-hidden="true">
                        <use xlink:href="#icon--34"></use>
                    </svg>
                </label>
            </div>
        </div>
    </div>

    <div class="site weui-cells_checkbox">
        <div class="weui-cell ">
            <div class="weui-cell__hd">
                <label for="name">人数:</label>
            </div>
            <div class="weui-cell__bd">
                <input class="weui-input" name="hold" placeholder="10">
            </div>
            <div class="weui-cell__dd">
                <label for="name">人</label>
            </div>
        </div>
    </div>
    <div class="site weui-cells_checkbox">
        <div class="weui-cell ">
            <div class="weui-cell__hd">
                <label for="name">最低消费:</label>
            </div>
            <div class="weui-cell__bd">
                <input class="weui-input" name="holdh" placeholder="">
            </div>
            <div class="weui-cell__dd">
                <label for="name">元</label>
            </div>
        </div>
    </div>
    <div class=" weui-cells weui-cells_checkbox">
        <div class="facility">
            <label class="weui-cell" for="s11">
                <div class="weui-cell">
                    <p>是否开启二维码</p>
                </div>
                <div class="weui-cell__hd ">
                    <p>是</p>
                </div>
                <div class="weui-cell__hd">
                    <input type="radio" class="weui-check" value="1" name="lock_qrcode" id="s11" checked="checked">
                    <i class="weui-icon-checked"></i>
                </div>
            </label>

            <label class="weui-cell" for="s12">
                <div class="weui-cell__hd">
                    <p>否</p>
                </div>
                <div class="weui-cell__hd">
                    <input type="radio" name="lock_qrcode" value="0" class="weui-check" id="s12">
                    <i class="weui-icon-checked"></i>
                </div>
            </label>
        </div>
    </div>


    <div class="site weui-cells_checkbox">
        <div class="weui-cells_checkbox ">
            <div class="weui-grids  picture">
                <div class="video weui-flex__item get-img" id="add">
                    <label  for="uploaderInput">
                        <img src="/img/erha1.png" alt="">
                    </label>
                </div>
                <div class="weui-uploader__input-box pull-right" style="display: none;">
                    <form action="" id="img-form">
                        @csrf
                        <input id="uploaderInput" name="thumb" class="weui-uploader__input" type="file" accept="image/*" multiple="" onchange="saveImg('/uploadImg', '#img-form', showHead)">
                    </form>
                </div>
                <div class="weui-uploader__input-box pull-right" style="display: none;">
                    <form action="" id="change-img-form">
                        @csrf
                        <input id="change-img" name="thumb" class="weui-uploader__input" type="file" accept="image/*" multiple="">
                    </form>
                </div>

            </div>
        </div>
    </div>

    <div class="demos-content-padded">
        <a href="javascript:;" class="weui-btn weui-btn_blue open-popup">确认修改</a>
    </div>
</div>
<script>
    var id = getRequest().id;
     sid = getRequest().sid;
        $.post("/api/showRoom",{id:id},function(res){
            if(typeof res === 'string'){
                   res = JSON.parse(res);
               }
            console.log("res",res);
            //显示内容
            $("input[name='name']").val(res.data.name);
            //最低消费
            $("input[name='holdh']").val(res.data.min_consumption) ;
            //人数
            $("input[name='hold']").val(res.data.hold);
            //是否开始扫码点餐
            if (res.data.is_use == 0){
                $("#s12").prop("checked", true);
            }  else if(res.data.is_use == 1){
                $("#s11").prop("checked", true);
            }
            //房间
            if(res.data.type === 0){
               $("#selectType").val("包房");
            }else if(res.data.type === 1){
                $("#selectType").val("大厅");
            }
            $("input[name='type']").val(res.data.type);
           // 显示图片
           showFoodImg(res.data.thumb);
        });
        // 显示菜的图片
        function showFoodImg (str) {
            var arr = str.split(";"),
                    htmlText = [],
                    obj = {};
            console.log("arr", arr);
            for (var i = 0, len = arr.length; i < len; i++) {
                obj['data'] = arr[i]
                showHead(obj);
            }
        }
    // 显示上传的图片
    function showHead(img) {

        var htmlText = [];
        htmlText.push('<div class="weui-cell__td video">');
        htmlText.push('<label class="face-img">');

        htmlText.push('<img src=' + img.data + ' class="myimg"/>');
        htmlText.push('</label>');
        htmlText.push('</div>');

        console.log("htmlText", htmlText);
        $(".get-img").before(htmlText.join(''));

    }
    // 显示改变上传图片
    function changeImg(img, element) {
            if(img.code==200){
                element.attr("src", img.data);
            }else{
                $.toast(img.info, 'text');
            }

    }


    $(".picture").on("click", ".face-img", function () {
        var _that = $(this).children("img");
        console.log("666");
        $("#change-img").click();

        $("#change-img").change(function () {
            saveImg('/uploadImg', '#change-img-form', changeImg, _that)
        });
    });

  //确认修改 房桌  请求

    $(".open-popup").click(function(){
        //对应参数
        var data ={};
        data['shop_id'] =sid;
        data['id'] =id;
        data['name'] =$("input[name='name']").val();
        data['type'] =$("input[name='type']").val();
        data['hold'] =$("input[name='hold']").val();
        data['thumb'] =$("input[name='thumb']").val();
        data['lock_qrcode'] = $("input[name='lock_qrcode']:checked").val();
        data['min_consumption'] =$("input[name='holdh']").val();
        data['thumb'] = "";
        var len = $(".face-img .myimg").length;

        $(".face-img img").each(function (index, value) {
            console.log("index", index);
            console.log("len",len);
            var url = $(this).attr("src");
            if (index < len -1) {
                console.log("len",len);
                data['thumb'] += url + ';';
            } else {
                data['thumb'] += url;
            }
        });
        //创建请求接口方法
        $.post("/api/shop/updateRoomTable",data,function(res){
            console.log("res",res);
            //字符串转换对象
            if(typeof res === 'string'){
                res =JSON.parse(res);
            }
            $.alert (res.info, function () {
                if(res.code == 200){
                    history.go(-1);
                }
            });

        })
    });




     //房间类型
    $("#selectType").select({
        title: "选择房间",
        items: [{title: '包房', value: 0}, {title: '大厅', value: 1}],
        onChange: function(res) {
            console.log("res", res);

        },
        onClose: function(res) {
            console.log("close", res);
            $("#type").val(res.data.values);

        },
        onOpen: function() {
            console.log("open");
        }
    });

</script>
@endsection
@extends('layouts/footer')
